import { defineComponent, KeepAlive } from "vue";
import { useStore } from "vuex";
import { RouterView } from "vue-router";

export default defineComponent({
  name: "App",
  setup() {
    const store = useStore();
    window.addEventListener('resize', function (event) {
      store.dispatch("app/setClientWidth", event.target.innerWidth)
    });
    store.dispatch("app/setClientWidth", window.innerWidth)
  },
  render() {
    return <div class='App' class="h-full w-full">
      <el-container>
        <el-header class="p-0">
          <global-header></global-header>
        </el-header>
        <el-main style="min-height:calc(100vh - 120px)">
          <RouterView>
            {
              ({ Component }) => <KeepAlive include={['Home']}> <Component /> </KeepAlive>
            }
          </RouterView>
        </el-main>
        <el-footer>
          <global-footer></global-footer>
        </el-footer>
      </el-container>
    </div>;
  }
})